<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText" @tap="back()">返回</block>
			<block slot="content">听歌记录</block>
		</cu-custom>
		<scroll-view class="music-list">
			<view v-for="(m,i) in musicList" class="music-view">
				<view class="music-left">
					<text>{{ m.name }} - {{ m.singer }}</text>
					<view class="music-bottom">[{{ m.interval }}] {{ m.albumName==''?'未知專輯':m.albumName }}</view>
				</view>
				<view class="music-play" @click="playMusic(m)">
					<text @click="playMusic(m,1)"></text>
					<text @click="playMusic(m,2)"></text>
				</view>
			</view>
			<view class="load-progress" :class="progress!=0?'show':'hide'" :style="[{top: (statusHeight+40)+'px'}]">
				<view class="load-progress-bar bg-cyan" :style="[{transform: 'translate3d(-' + (100-progress) + '%, 0px, 0px)'}]"></view>
				<view class="load-progress-spinner text-cyan"></view>
			</view>
			<view class="bottom-door"> 
				功能下架喽 → &nbsp;&nbsp;&nbsp;
				<!-- <text @click="toMusic()">传送门</text> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusHeight: this.StatusBar,
				musicList: [],
				progress: 0,
			}
		},
		onShow() {
			this.getMusicHistory()
		},
		methods: {
			getMusicHistory() {
				this.musicList = uni.getStorageSync('historyList')
			},
			playMusic(songinfo,type) {
				let id = songinfo.songmid
				let so = songinfo.source
				let ss = songinfo.types[0].type || '128k'
				let self = this
				uni.showLoading({
					title: '加载音乐...',
					mask: true
				})
				this.$http.get('/music/mc/song/url', {songmid: id, source: so, songsize: ss}, {tk: 'e920e52fad7edc74287d6fd7f5e56546'}, {})
					.then(musicUrlRes => {
						if (type == 1) {
							const bgAudioMannager = uni.getBackgroundAudioManager()
							bgAudioMannager.title = songinfo.name
							bgAudioMannager.singer = songinfo.singer
							bgAudioMannager.coverImgUrl = songinfo.img
							bgAudioMannager.src = musicUrlRes.url
							uni.hideLoading()
							let historyList = uni.getStorageSync('historyList') || []
							let f = self.isArr(historyList, songinfo.songmid)
							if (!f) {
								historyList.push(songinfo)
								uni.setStorageSync('historyList', historyList)
							}
						} else if (type == 2) {
							const downloadTask = uni.downloadFile({
								url: musicUrlRes.url,
								success: (tempFileRes) => {
									if (tempFileRes.statusCode === 200) {
										console.log('下载成功');
										uni.saveFile({
											tempFilePath: tempFileRes.tempFilePath,
											success: function (saveFileRes) {
												console.log(saveFileRes)
												let savedFilePath = saveFileRes.savedFilePath
												let saveList = uni.getStorageSync('saveList') || []
												let saveOne = {
													path: savedFilePath,
													info: songinfo
												}
												saveList.push(saveOne)
												uni.setStorageSync('saveList', saveList)
											}
										});
									}
								}
							});
							downloadTask.onProgressUpdate((res) => {
								console.log('下载进度' + res.progress);
								self.progress = res.progress/2
								// console.log('已经下载的数据长度' + res.totalBytesWritten);
								// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);						
								// 测试条件，取消下载任务。
								if (res.progress == 100) {
									// downloadTask.abort();
									self.progress = 0
									uni.hideLoading()
								}
							});
						}
					}).catch(e => {
						uni.hideLoading()
						uni.showToast({
							title: e.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
			},
			isArr(arr,value) {
				for(var i=0;i<arr.length;i++){
					if(value===arr[i].songmid){
						return true
					}
				}
			 return false
			},
			toMusic() {
				uni.switchTab({
					url: '/pages/music/music'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.music-list {
		.music-view {
			display: flex;
			flex-direction: row;
			margin: 60rpx;
			.music-left {
				font-size: 28rpx;
				flex: 8;
				text {
					font-weight: bold;
				}
				.music-bottom {
					
				}
			}
			.music-play {
				flex: 2;
				padding-top: 20rpx;
				text {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					background-size: 100% 100%;
					&:nth-child(1) {
						background-image: url(../../static/imgs/icons/m-play.png);
					}
					&:nth-child(2) {
						margin-left: 30rpx;
						background-image: url(../../static/imgs/icons/m-download.png);
					}
				}
			}
		}
		.bottom-door {
			padding: 50rpx;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			text {
				padding-left: 5px;
				color: #4690c8;
				font-size: 18px;
			}
		}
	}
</style>
